<template>
  <div class="wrapper-add-edit">
    <el-form ref="refForm" :model="formData" :rules="rules" label-width="auto">
      <el-form-item label="登录名称" prop="username">
        <el-col :span="10">
          <el-input
            disabled
            v-model="formData.username"
            placeholder="请输入登录名称..."
            maxlength="16"
            show-word-limit
          />
        </el-col>
        <el-col :span="13" :push="1">
          <span>管理员登录昵称，英文字符</span>
        </el-col>
      </el-form-item>

      <el-form-item label="真实姓名" prop="realName">
        <el-col :span="10">
          <el-input v-model="formData.realName" placeholder="请输入真实姓名..." maxlength="10" show-word-limit />
        </el-col>
        <el-col :span="13" :push="1">
          <span>管理员真实姓名</span>
        </el-col>
      </el-form-item>

      <el-form-item label="身份证号码" prop="idCard">
        <el-col :span="10">
          <el-input v-model="formData.idCard" placeholder="请输入身份证号码..." maxlength="18" show-word-limit />
        </el-col>
        <el-col :span="13" :push="1">
          <span>管理员身份证号码</span>
        </el-col>
      </el-form-item>

      <el-form-item label="手机号码" prop="mobilePhone">
        <el-col :span="10">
          <el-input
            v-model="formData.mobilePhone"
            placeholder="请输入手机号码..."
            oninput="value=value.replace(/[^\d]/g,'')"
            maxlength="11"
            show-word-limit
          />
        </el-col>
        <el-col :span="13" :push="1">
          <span>管理员手机号码</span>
        </el-col>
      </el-form-item>

      <el-form-item label="电子邮箱" prop="email">
        <el-col :span="10">
          <el-input v-model="formData.email" placeholder="请输入电子邮箱..." maxlength="50" show-word-limit />
        </el-col>
        <el-col :span="13" :push="1">
          <span>管理员联系电子邮箱</span>
        </el-col>
      </el-form-item>

      <el-form-item>
        <el-button type="success" @click="onUpdate()">确定修改</el-button>
        <el-button type="info" @click="onBack2List">取消</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
import { getAdminId } from '@/utils/common'
import { toastError, toastSuccess } from '@/utils/toast'
import { getSStorageObj } from '@/utils/web-storage'

import router from '@/router'
import store from '@/store'
import { defineComponent, ref, onMounted } from 'vue'
export default defineComponent({
  name: 'AdminEditView',
  components: {},
  setup() {
    const refForm = ref(null)
    const formData = ref({})

    const rules = ref({
      username: [{ required: true, message: '请输入登录名称', trigger: 'blur' }],
    })

    // 获取当前登录管理员id
    const getIdAdmin = () => {
      formData.value.createAdminId = getAdminId()
    }
    // 得到传过来的 admin 的详细资料
    const getQuery = () => {
      const admin = getSStorageObj('ParamData')
      console.log('admin:', admin)
      if (!admin) onBack2List
      formData.value = admin
    }
    const onUpdate = () => {
      if (!refForm.value) return
      refForm.value.validate((valid) => {
        if (!valid) {
          toastError('表单验证失败！请检查您的输入！')
          return
        }
        // 执行到这里，说明表单验证通过
        store
          .dispatch('sys_admin/modifyAll', formData.value)
          .then(() => {
            toastSuccess('修改成功！')
            router.push({ path: 'list-all' })
          })
          .catch((error) => {
            console.log('修改时返回错误：', error)
          })
      })
    }
    // 返回列表页
    const onBack2List = () => {
      //router.go(-1)
      router.push({ path: 'list-all' })
    }

    onMounted(() => {
      getQuery()
    })

    return {
      refForm,
      formData,
      rules,
      getIdAdmin,
      onBack2List,
      getQuery,
      onUpdate,
    }
  },
})
</script>

<style lang="scss" scoped></style>
